import {
    Col, Row, Button, Input, Checkbox, Table, Tag, Pagination, Tooltip, Skeleton, Image, message
    , Popconfirm, Modal, InputNumber, Descriptions
} from 'antd';
import { useNavigate } from "react-router-dom";
import { useEffect, useRef, useState } from "react";
import { addGoodsType, deleteGoodsType, getGoodsTypes } from '../../api/goods';
 import { Admin_AddBusinessType, Admin_DeleteBusinessType, Admin_GetBusinessTypes } from '../../api/supplier';

/**
 * 
 * @returns 供应商管理主页
 */
const SupplierType = () => {
    const { Search } = Input;
    //搜索框dom
    const myRef = useRef();
    const navigate = useNavigate();
    const { TextArea } = Input;
    document.info = [
        {
            title: "经营种类",
            url: "/supplier/type"
        },
        {
            title: "供应商管理-主页",
            url: "/supplier",
        }
    ]
      
        // 条件搜索
        const [likeSelect, setLike] = useState({
            page: 1,
            limit: 10,
            key: '',
            total: 0
        });


            //新增模态框状态
    const [open, setOpen] = useState(false);
    //表格数据
    const [tableData, setTableData] = useState([]);
    //表格加载
    const [loading, setLoading] = useState(false);
    //屏骨架
    const [isFirst, setIsFirst] = useState(true);
    const [explain,setExplain]=useState('');
    const [nameText,setName]=useState('');


    const methods = {
        //关闭模态框,清空数据
        setModalStatus:()=>{
            setName("");
           setExplain("");
           setOpen(false);
        },
        //类型描述赋值
        onChangeArea: (e) => {
            setExplain(e.target.value);
        },
        //类型名称赋值
        nameOnChange:(e)=>{
            setName(e.target.value);
        },
        //新增经营种类
        addType:async()=>{
           setLoading(true);
           const res=await Admin_AddBusinessType({explain:explain,name:nameText});
           if(res?.result===0){
            message.success(res?.message);
            methods.getGoodsTypes();
            setLoading(false);
           }else{
            message.error(res?.message);
            setLoading(false);
           }
           setName("");
           setExplain("");
        },
        //删除操作 模态框点击确认
        confirm: async (id) => {
            setLoading(true);
            const res = await Admin_DeleteBusinessType({ id: id });
            if (res.result === 0) {
                message.success('删除成功');
                methods.getGoodsTypes();
            } else {
                message.error('删除失败');
                setLoading(false);
            }
        },
        //删除操作 模态框点击取消
        cancel: (e) => {
            message.error('已取消');
        },
        /**
         * 搜索按钮触发 和onSearch使用
         * @param {*} e 
         */
        onSearchData: (e) => {
            setLoading(true);
            setLike((likeSelect) => ({ ...likeSelect, key: e.target.value }));
        },
        //搜索按钮触发
        onSearch: (value, _e, info) => {
            setLoading(true);
            setLike((likeSelect) => ({ ...likeSelect, key: value }));
        },
        /**
         * 复选框改变事件
         * @param {*} e 
         */
        onChange: (e) => {
            setLoading(true);
            setLike((likeSelect) => ({ ...likeSelect, isDirectly: e }));
        },
        /**
         * 页面主要数据
         */
        getGoodsTypes: async () => {
            const res = await Admin_GetBusinessTypes({ ...likeSelect});
            res.data.data.map((d, i) => d.Index = i + 1)
            setLoading(false);
            setTableData(res.data);
            setLike((likeSelect) => ({ ...likeSelect, total: res.data.total }));
            setIsFirst(false)
        },
        pageChange: (value) => {
            setLoading(true);
            setLike((likeSelect) => ({ ...likeSelect, page: value }))
        },
        /**
         * 跳转新增
         */
        goAdd: () => {
            setOpen(true)
        },
        //详情按钮事件
        goDetail: (hang) => {

        },
        //删除按钮事件
        goDelete: (hang) => {

        }
    }


    const data = {
        //表格表头
        columns: [
            {
                title: '序号',
                dataIndex: 'Index',
                key: 'Index',
                width: 80
            },
            {
                title: '类型',
                dataIndex: 'name',
                key: 'name',
                width: 200,
            },
            {
                title: '商品数量',
                dataIndex: 'count',
                key: 'count',
                width: 200,
            },
            {
                title: '时间',
                dataIndex: 'time',
                key: 'time',
                width: 170,
                onCell: () => {
                    return {
                        style: {
                            maxWidth: 170,
                            overflow: 'hidden',
                            whiteSpace: 'nowrap',
                            textOverflow: 'ellipsis',
                            cursor: 'pointer',

                        }
                    }
                },
                render: (text) => (
                    <div>
                        {text == null ? <Tag color="red" bordered={false} className="danger-tag">直营</Tag> :
                            <Tag color="blue" bordered={false} className="primary-tag">{text}</Tag>}
                    </div>
                ),
            },


            {
                title: '操作',
                dataIndex: '',
                key: '',
                fixed: "right",
                width: 225,
                render: (text, hang) => (
                    <div>
                        <div className='primary-cell btn' onClick={() => methods.goDetail(hang)}>详情</div>

                        <Popconfirm
                            style={{ width: 20 }}
                            title="删除"
                            description="该类型下存在商品，删除后那些商品将会成为无类型商品，且删除后不可恢复，确认要删除吗？"
                            onConfirm={() => { methods.confirm(hang.id) }}
                            onCancel={() => { methods.cancel(hang.id) }}
                            okText="确认"
                            cancelText="取消"
                        >
                            {hang.count > 0 && <div className='danger btn'  >删除</div>}
                        </Popconfirm>


                        <Popconfirm
                            style={{ width: 20 }}
                            title="删除"
                            description="删除后不可恢复，确认要删除吗？"
                            onConfirm={() => { methods.confirm(hang.id) }}
                            onCancel={() => { methods.cancel(hang.id) }}
                            okText="确认"
                            cancelText="取消"
                        >
                            {hang.count === 0 && <div className='danger btn'  >删除</div>}
                        </Popconfirm>

                    </div>
                )
            },

        ],
     
        // 新增页面描述列表
        items: [
            {
                key: '1',
                label: '种类名称',
                children: <Input placeholder='种类名称' value={nameText} onChange={methods.nameOnChange}></Input>,
                span: 3,
            },
            {
                key: '2',
                label: '种类描述',
                children: <TextArea showCount maxLength={100} value={explain} onChange={methods.onChangeArea} placeholder="种类描述" />,
                span: 3,
            },
            {
                key: '3',
                label: '操作',
                children: <Button type='primary' disabled={nameText===""} onClick={methods.addType}>新增</Button>,
                span: 3,
            },
        ]

    }

    useEffect(() => {
        methods.getGoodsTypes();
    }, [likeSelect.page, likeSelect.limit, likeSelect.key]);


    return (
        <>
            <div className='Containers'>
            <Skeleton active loading={isFirst} paragraph={{ rows: 15 }}>
                <div className="good-head">
                    <div><Button type="primary" onClick={() => { methods.goAdd() }}>新增</Button></div>


                    <div>
                        <Search
                            placeholder="种类名称"
                            onSearch={methods.onSearch}
                            allowClear
                            style={{
                                width: 500,
                            }}
                            onChange={(e) => methods.onSearchData(e)}
                            ref={myRef}
                        />
                    </div>


                    <div >
                        

                    </div>
                </div>

                <Modal

                    okButtonProps={false}
                    open={open}
                    onOk={() => methods.setModalStatus()}
                    onCancel={() => methods.setModalStatus()}
                    width={900}
                    footer={null}
                >

                    <Descriptions title="新增类型" layout="vertical" bordered items={data.items}>

                    </Descriptions>
                </Modal>

                <Table dataSource={tableData.data} columns={data.columns} bordered pagination={false} loading={loading}
                    style={{ marginTop: "10px" }} />

                <div className="page-layout">
                    <Pagination defaultCurrent={likeSelect.page} total={likeSelect.total} onChange={(value) => { methods.pageChange(value) }} />
                </div>

                </Skeleton>
            </div>

        </>
    )
}


export default SupplierType